<template>
  <div class="box">
    <div>
      <t-swiper showSlideBtn="never" :duration="300" :interval="2000">
        <t-swiper-item
          v-for="item in bannerList"
          :key="item"
          showSlideBtn="never"
        >
          <a :href="item.carousel_link" target="_blank">
            <div class="w-full pb-[30%] lg:pb-[20%] relative">
              <img
                class="w-full h-full absolute object-cover"
                :src="item.carousel_url"
                alt=""
              />
            </div>
          </a>
        </t-swiper-item>
      </t-swiper>
    </div>
    <!--  -->
    <div class="bg-[#ffffff] pt-[30px] pl-3 pr-3">
      <div class="max-w-[1200px] mx-auto">
        <div class="flex flex-col gap-2 rounded-a lg:flex-row lg:items-center">
          <h3 class="text-xl lg:text-3xl text-default">选择中加思培</h3>
          <span class="text-[#888888] text-base lg:text-xl">
            —— 让世界通行无阻 定居无忧
          </span>
        </div>
        <div class="grid gap-5 lg:grid-cols-2">
          <div
            class="w-full pb-[60%] lg:pb-[50%] bg-black relative after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:opacity-50 after:z-10"
            v-for="item in selectGlobalList"
            :key="item.id"
          >
            <img
              :src="item.select_global_url"
              alt=""
              class="w-full h-full absolute object-cover"
            />
            <div
              class="absolute z-20 p-3 lg:p-5 w-full h-full flex flex-col gap-3"
            >
              <div class="text-2xl font-bold">
                {{ item.select_global_title }}
              </div>
              <div class="flex-1">
                <t-typography-paragraph :ellipsis="{ row: 5 }">
                  {{ item.select_global_content }}
                </t-typography-paragraph>
              </div>
              <div class="flex justify-end text-[#666]">
                2020-20-20 12:12:12
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="bg-[#fdfbf6] pt-[30px] pl-3 pr-3">
      <div class="max-w-[1200px] mx-auto">
        <div class="flex flex-col rounded-b">
          <h3 class="text-xl lg:text-3xl text-default">中加思培视点</h3>
          <span class="text-[#888888] text-base lg:text-xl"
            >案例信息即刻捕捉，让您实时了解中加思培动态</span
          >
        </div>
        <div class="grid lg:grid-cols-3 gap-8">
          <div class="w-full item">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <div class="w-[5px] h-[30px] bg-default"></div>
                <span class="text-[19px] text-[#a6a6a6]">资产配置推荐</span>
              </div>
              <router-link :to="'/assetsAllocation'">
                <img
                  class="w-5 h-5 lg:w-8 lg:h-8"
                  src="https://www.globevisa.com.cn/static/index/images/index/button.png"
                  alt=""
                />
              </router-link>
            </div>
            <div class="item-content">
              <div
                class="cursor-pointer"
                v-for="(item, index) in assetConfigList"
                :key="index"
                @mouseenter="assetHover = index"
              >
                <router-link :to="`/assetsDetails?id=${item.id}`">
                  <div class="flex gap-2" v-if="assetHover === index">
                    <div class="w-[40%] pb-[25%] relative">
                      <img
                        class="w-full h-full absolute object-cover"
                        :src="item.asset_config_url"
                      />
                    </div>
                    <div
                      class="flex-1 text-default text-[14px] flex flex-col gap-3 justify-between"
                    >
                      <t-typography-paragraph :ellipsis="{ row: 3 }">
                        {{ item.asset_config_intro }}
                      </t-typography-paragraph>
                      <div class="text-right">{{ item.create_time }}</div>
                    </div>
                  </div>
                </router-link>
                <div class="item-content-oli hover_text1">
                  {{ item.asset_config_title }}
                </div>
              </div>
            </div>
          </div>
          <div class="w-full item">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <div class="w-[5px] h-[30px] bg-default"></div>
                <span class="text-[19px] text-[#a6a6a6]">项目资讯</span>
              </div>
              <router-link :to="'/information'">
                <img
                  class="w-5 h-5 lg:w-8 lg:h-8"
                  src="https://www.globevisa.com.cn/static/index/images/index/button.png"
                  alt=""
                />
              </router-link>
            </div>
            <div class="item-content">
              <div
                class="cursor-pointer"
                v-for="(item, index) in projectNewsList"
                :key="index"
                @mouseenter="newsHover = index"
              >
                <router-link :to="`/information_details?id=${item.id}`">
                  <div class="flex gap-2" v-if="newsHover === index">
                    <div class="w-[40%] pb-[25%] relative">
                      <img
                        class="w-full h-full absolute object-cover"
                        :src="item.project_news_url"
                      />
                    </div>
                    <div
                      class="flex-1 text-default text-[14px] flex flex-col gap-3 justify-between"
                    >
                      <t-typography-paragraph :ellipsis="{ row: 3 }">
                        {{ item.project_news_intro }}
                      </t-typography-paragraph>
                      <div class="text-right">{{ item.create_time }}</div>
                    </div>
                  </div>
                </router-link>
                <div class="item-content-oli hover_text1">
                  {{ item.project_news_title }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="bg-[#fdfbf6] pt-10 lg:pt-[60px] pl-3 pr-3">
      <div class="max-w-[1200px] mx-auto lg:flex gap-[50px]">
        <div class="post w-full lg:w-[30%]">
          <div class="post-title">GLOBEVISA</div>
          <h5 class="text-[#555555] mt-[30px] text-[20px]">马上预约</h5>
          <h3 class="text-[#555555] text-[24px] my-[15px]">免费定制方案吧</h3>
          <span class="text-[#555555] text-[12px]">贴心服务减少后顾之忧</span>
          <div class="w-[80%] mx-[auto] mt-[20px]">
            <!-- @reset="onReset" @submit="onSubmit" -->
            <t-form ref="formRef" :data="formData" :rules="rules" :colon="true">
              <t-form-item label="姓名" name="appointment_name">
                <t-input
                  placeholder="请输入姓名"
                  v-model="formData.appointment_name"
                />
              </t-form-item>
              <t-form-item label="手机号" name="appointment_phone">
                <t-input
                  placeholder="请输入您的手机号码"
                  v-model="formData.appointment_phone"
                />
              </t-form-item>
            </t-form>
          </div>
          <div>
            <button class="post-btn" @click="submit">立即预约获取方案</button>
          </div>
        </div>
        <div class="grid gap-5 lg:grid-cols-2 w-full flex-1">
          <div class="w-full" v-for="item in 4" :key="item">
            <img
              class="w-[100%] h-[180px]"
              src="http://cdn.pacificimmi.com/dir/22a16bfe4f1c1c13ff7ea2d72a99a374.jpg"
              alt=""
            />
            <h1 class="text-[#333] text-center h-[20px] leading-[34px]">
              内容待定
            </h1>
          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <div class="bg-[#fdfbf6] py-[30px] pl-3 pr-3">
      <div class="max-w-[1200px] mx-auto">
        <div class="flex flex-col rounded-b">
          <h3 class="text-xl lg:text-3xl text-default">热门项目</h3>
          <div class="flex items-center justify-between">
            <span class="text-[#888888] text-sm lg:text-xl"
              >项目即时更新热门项日，紧跟移民政策出国不踩坑</span
            >
            <router-link :to="'/list'">
              <img
                class="w-5 h-5 lg:w-8 lg:h-8"
                src="https://www.globevisa.com.cn/static/index/images/index/button.png"
                alt=""
              />
            </router-link>
          </div>
        </div>
        <div class="grid lg:grid-cols-3 gap-5">
          <!-- projectDetails?id=8 -->
          <div
            class="w-full pb-[55%] relative"
            v-for="item in projectList"
            :key="'project_' + item.id"
          >
            <router-link :to="`/projectDetails?id=${item.id}`">
              <img
                class="w-full h-full absolute"
                :src="item.project_image_url_1"
                alt=""
              />
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { MessagePlugin } from "tdesign-vue-next";
import {
  bannerApi,
  selectGlobalApi,
  projectListApi,
  assetConfigApi,
  projectNewsApi,
  appointmentApi,
} from "@/api";
const formRef = ref();
const formData = reactive({
  appointment_name: "",
  appointment_phone: "",
});
const rules = {
  appointment_name: [{ required: true, message: "请输入姓名", type: "error" }],
  appointment_phone: [
    { required: true, message: "请输入手机号", type: "error" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "请输入正确的手机号",
      type: "error",
    },
  ],
};

const bannerList = ref([]);
const selectGlobalList = ref([]);
const projectNewsList = ref([]);
const assetConfigList = ref([]);
const projectList = ref([]);

const assetHover = ref(0);
const newsHover = ref(0);

// 获取轮播图
const getBannerList = () => {
  return bannerApi();
};
// 获取选择中加思培
const getSelectGlobal = () => {
  return selectGlobalApi({ page_size: 4 });
};
// 获取热门项目
const getProjectList = () => {
  return projectListApi({ is_hot: 1 });
};
// 获取项目资讯
const getProjectNews = () => {
  return projectNewsApi({ page_size: 6 });
};
// 获取资产配置
const getAssetConfig = () => {
  return assetConfigApi({ page_size: 6 });
};

const submit = () => {
  formRef.value.validate().then((vaild) => {
    if (vaild === true) {
      appointmentApi(formData).then((res) => {
        formRef.value.reset();
        MessagePlugin.success("预约成功，请等待顾问联系");
      });
    }
  });
};
onMounted(() => {
  Promise.all([
    getBannerList(),
    getSelectGlobal(),
    getProjectList(),
    getProjectNews(),
    getAssetConfig(),
  ]).then((res) => {
    bannerList.value = res[0].items;
    selectGlobalList.value = res[1].items;
    projectList.value = res[2].items;
    projectNewsList.value = res[3].items;
    assetConfigList.value = res[4].items;
  });
});
</script>

<style scoped lang="scss">
.box {
  .rounded-a {
    border-bottom: 2px solid #dcdcdc;
    padding-bottom: 34px;
    margin-bottom: 34px;
  }

  .rounded-b {
    border-bottom: 2px solid #dcdcdc;
    padding-bottom: 10px;
    margin-bottom: 34px;
  }

  .item {
    .item-content {
      margin-top: 10px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
      background-color: #fff;
      padding: 12px 7px;

      .item-content-oli {
        position: relative;
        text-indent: 20px;
        margin-top: 10px;

        &::before {
          content: "·";
          position: absolute;
          left: -8px;
          top: -6px;
          font-size: 20px;
        }
      }
    }
  }

  .post {
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    height: 430px;
    background-color: #fff;
    margin-bottom: 60px;
    position: relative;

    .post-title {
      display: inline-block;
      width: 142px;
      height: 26px;
      background-color: var(--color);
      color: #fff;
      line-height: 26px;
      text-align: center;
      margin: 0 auto;
    }

    .post-btn {
      display: inline-block;
      width: 202px;
      height: 46px;
      background-color: var(--color);
      border-radius: 5px;
      font-size: 17px;
      color: #fff;
      line-height: 46px;
      margin-top: 22px;
    }
  }
}
:deep(.t-typography) {
  height: 66px;
  align-items: start !important;
  margin: 0 !important;
}

:deep(.t-form__controls) {
  margin: 0 !important;
}

:deep(.t-form__label) {
  width: 70px !important;
  text-align: center;
}

:deep(.t-form__label) {
  padding: 0 !important;
}

:deep(.t-swiper__arrow--default .t-swiper__arrow-left) {
  left: 10% !important;
  background-color: rgb(0 0 0 / 22%);
}
:deep(.t-swiper__arrow--default .t-swiper__arrow-right) {
  right: 10% !important;
  background-color: rgb(0 0 0 / 22%);
}

:deep(.t-swiper__arrow svg.t-icon) {
  width: 70px;
  height: 100px;
}

:deep(.t-swiper__arrow-left),
:deep(.t-swiper__arrow-right) {
  width: 60px;
  height: 100px;
  @media (max-width: 1024px) {
    width: 30px;
    height: 60px;
  }
}
</style>
